<template>
  <page-frame bg="#323232">
    <div class="Pc">
      <div class="box">
        <div class="top">
          <div class="left">
            <img class="avatar" src="@/assets/images/banner.png"/>
            <div class="userinfo">
              <div class="name">
                {{ userInfo.username }}
              </div>
              <div class="box_num">
                <span>余额&nbsp;&nbsp;&nbsp;</span>
                ¥<span class="num">123.76</span>
                <img src="@/assets/images/shuaxin.png" @click="updateUderInfo"/>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="button_list">
              <div class="item" @click="go('Recharge')">充值</div>
              <div class="item" @click="go('Extract')">提现</div>
            </div>
            <div class="my">
              <div class="item" @click="bets(0)">
                <img src="@/assets/icons/svg/bet.svg"/>
                <div>未结算</div>
              </div>

              <div class="item" @click="bets(1)">
                <img src="@/assets/icons/svg/bet2.svg"/>
                <div>已结算</div>
              </div>
              <div class="item" @click="go('UserInfo')">
                <img src="@/assets/icons/svg/my.svg"/>
                <div>我的账户</div>
              </div>
            </div>
          </div>
        </div>
        <div style="font-size: 30px">邀请码：{{ userInfo.y_code }}</div>
      </div>
    </div>
    <div class="Mobile">
      <div class="box">
        <div class="top">
          <div class="left">
            <div class="avatar">
              <img class="img" src="@/assets/images/banner.png"/>
            </div>
            <div class="userinfo">
              <div class="name">
                {{ userInfo.username }}
              </div>
              <div class="box_num">
                余额 ¥<span class="num">123.76</span>
                <img src="@/assets/images/shuaxin.png" @click="updateUderInfo"/>
              </div>
              <div class="button_list">
                <div class="item" @click="go('Recharge')">充值</div>
                <div class="item" @click="go('Extract')">提现</div>
              </div>
            </div>
          </div>

          <div class="right">

            <div class="my">
              <div class="item">
                <img src="@/assets/icons/svg/bet.svg"/>
                <div @click="bets(0)">未结算</div>
              </div>

              <div class="item">
                <img src="@/assets/icons/svg/bet2.svg"/>
                <div @click="bets(1)">已结算</div>
              </div>
              <div class="item">
                <img src="@/assets/icons/svg/my.svg"/>
                <div @click="go('UserInfo')">我的账户</div>
              </div>
            </div>
          </div>
        </div>
        <div style="font-size: 30px;padding: 50px 30px 0;text-align: center">邀请码：{{ userInfo.y_code }}</div>
      </div>
    </div>

  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance} from "vue";


export default {
  name: "Recharge",
  setup() {
    /* 全局挂载utils工具类 start */
    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils, $ext} =
        proxy;

    /* 全局挂载 end */
    const state = reactive({
      userInfo: $ext.getUser(),
    });

    const go = (name) => {
      $router.push({name: name});
    }
    // 跳转注单
    const bets = (type) => {
      $router.push({
        path: "/bets",
        query: {
          type: type
        }
      });
    };

    const updateUderInfo = () => {
      $ext.getUser('', true)
    }
    return {
      ...toRefs(state),
      go,
      bets,
      updateUderInfo,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'invitationCode';

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.login-body {
  display: flex;
  /*x轴对齐*/
  justify-content: center;
  /*y轴对齐*/
  align-items: center;
  height: calc(100vh - 70px);
  width: 100%;
  background-color: #fff;
  //padding-top: 180px;
  .login-container {
    width: 500px;
    height: 380px;
    background-color: #fff;
    border-radius: 4px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;

      .title {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
    }

    .login-form {
      width: 90%;
      margin: 0 auto;

      .account {
      }

      .password {
        margin: 20px 0;
      }

      .btn {
        .submit {
          background-color: rgba(255, 45, 137, 1);
          color: #ffffff;
          padding: 14px 20px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
